<template>
  <div class="container">
    <div class="app-main">
      <div class="question-container">
        <el-card>
          <div class="btn_wrapper">
            <span style="font-size: 12px; color: pink;"
              >说明：目前支持学科和关键字条件筛选</span
            >
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              @click="toQuestions()"
              >新增试题</el-button
            >
          </div>
          <el-form
            ref="ruleForm"
            :rules="rulesForm"
            :model="form"
            label-width="80px"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="学科" style="width:100%" prop="subject">
                  <el-select
                    v-model="form.subject"
                    placeholder="请选择"
                    style="width:100%"
                    @change="subjectChange(form.subject)"
                  >
                    <el-option
                      v-for="(subject, index) in subjectList"
                      :label="subject.label"
                      :value="subject.value"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="二级目录"
                  style="width:100%"
                  prop="directoryName"
                >
                  <el-select
                    v-model="form.contents"
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="(subject, index) in contentsList"
                      :key="index"
                      :label="subject.directoryName"
                      :value="subject.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="标签" style="width:100%" prop="label">
                  <el-select
                    v-model="form.label"
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="(tags, index) in tagsList"
                      :key="index"
                      :label="tags.tags"
                      :value="tags.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="关键字" style="width:100%" prop="keyword">
                  <el-input
                    v-model="form.keyword"
                    placeholder="请选择"
                    style="width:100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="试题类型" style="width:100%" prop="textOf">
                  <el-select
                    v-model="form.textOf"
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="(type, index) in textType"
                      :key="index"
                      :label="type.label"
                      :value="type.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度" style="width:100%" prop="nandu">
                  <el-select
                    v-model="form.nandu"
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="(type, index) in hard"
                      :key="index"
                      :label="type.label"
                      :value="type.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向" style="width:100%" prop="fangXiang">
                  <el-select
                    v-model="form.fangXiang"
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="(type, index) in guidance"
                      :key="index"
                      :label="type.id"
                      :value="type"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人" style="width:100%" prop="manarge">
                  <el-select
                    v-model="form.manarge"
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="(type, index) in userList"
                      :key="index"
                      :label="type.username"
                      :value="type.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="题目备注" style="width:100%" prop="timu">
                  <el-input v-model="form.timu"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" style="width:100%" prop="qiye">
                  <el-input v-model="form.qiye"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市" prop="province">
                  <el-select
                    class="filter-item"
                    style="width:48%"
                    v-model="form.province"
                    @keyup.enter="handleFilter"
                    @change="handleProvince"
                    filterable
                  >
                    <el-option
                      v-for="item in citySelect.province"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-select
                    style="width:50%"
                    v-model="form.city"
                    @keyup.enter="handleFilter"
                    filterable
                  >
                    <el-option
                      v-for="item in citySelect.cityDate"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: right;">
                <el-button size="small" @click="resetForm">清除</el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="searchList"
                  v-model="form.subjectID"
                  >搜索</el-button
                ></el-col
              >
            </el-row>
          </el-form>

          <!-- 消息成功提示 -->
          <div class="alertInfo">
            <el-alert type="info" show-icon>
              <span>数据一共{{ total }}条</span></el-alert
            >
          </div>

          <!-- 表单区域 -->

          <el-table :data="tableBse">
            <el-table-column label="试题编号" width="120">
              <template slot-scope="scope">
                <span> {{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column label="学科">
              <template slot-scope="scope">
                <span> {{ scope.row.subject }}</span>
              </template>
            </el-table-column>
            <el-table-column label="目录">
              <template slot-scope="scope">
                <span>{{ scope.row.catalog }} </span>
              </template>
            </el-table-column>
            <el-table-column label="题型">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else>多选 </span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180">
              <template slot-scope="scope">
                <span> {{ scope.row.addDate | parseTimeByString }}</span>
              </template>
            </el-table-column>
            <el-table-column label="难度">
              <template slot-scope="scope">
                <span v-if="scope.row.difficulty == 1">简单</span>
                <span v-else-if="scope.row.difficulty == 2">一般</span>
                <span v-else-if="scope.row.difficulty == 3">困难</span>
              </template>
            </el-table-column>
            <el-table-column label="录入人">
              <template slot-scope="scope">
                <span v-if="scope.row.creatorID == 1">录入管理员</span>
                <span v-else-if="scope.row.creatorID == 2">超级管理员</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="light"
                  content="预览"
                  placement="bottom-end"
                >
                  <el-button
                    type="primary"
                    plain
                    icon="el-icon-view"
                    size="small"
                    circle
                    @click="previewList(scope.row.id)"
                  ></el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="light"
                  content="修改"
                  placement="bottom-end"
                >
                  <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="small"
                    circle
                    @click="toQuestions(scope.row.id)"
                  ></el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="light"
                  content="删除"
                  placement="bottom-end"
                >
                  <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="small"
                    circle
                    @click="removeQuestions(scope.row.id)"
                  ></el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="light"
                  content="加入精选"
                  placement="bottom-end"
                >
                  <el-button
                    type="warning"
                    plain
                    size="small"
                    icon="el-icon-check"
                    circle
                    @click="addClick(scope.row.id)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <div>
            <el-pagination
              class="fr"
              @size-change="handleSize"
              @current-change="handleCurrent"
              :current-page="querInfo.pagenum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="querInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-card>

        <!-- 弹出框 -->
      </div>
    </div>

    <questions-preview ref="preview" :questionsTags="questionsList" />
  </div>
</template>

<script>
import { list as directorySList } from '@/api/hmmm/directorys'
import { simple as subjectEz } from '@/api/hmmm/subjects'
import { list as listBase } from '@/api/hmmm/questions'
import { list as listTags } from '@/api/hmmm/tags'
import { questionType } from '@/api/hmmm/constants'
import { difficulty } from '@/api/hmmm/constants'
import { direction } from '@/api/hmmm/constants'
import { simple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { parseTimeByString } from '@/filters'
import QuestionsPreview from '../components/questions-preview.vue'
import { update } from '@/api/hmmm/questions'
import { remove } from '@/api/hmmm/questions'
import { detail, choiceAdd } from '@/api/hmmm/questions'

export default {
  data() {
    return {
      form: {
        contents: '', // 目录
        subject: '', // 学科
        label: '', // 标签
        textOf: '', //试题类型
        keyword: '', // 关键字
        nandu: '',
        fangXiang: '',
        manarge: '',
        timu: '',
        qiye: '',
        subjectID: '',
        chengshi: {
          street: ''
        }
      },
      subjectList: {
        region: ''
      },
      tagsList: {
        region: ''
      },
      textType: [],
      hard: [],
      guidance: [],
      userList: [],
      citySelect: {
        province: [],
        cityDate: []
      },
      tableBse: [
        // {
        //   number: "", // 试题编号
        //   subject: "", // 学科
        //   catalogID: "", // 目录
        //   questionType: "", // 题型
        //   addDate: "", // 录入时间
        //   difficulty: "", //难度
        //   creatorID: "", // 录入人
        //   pages: "" // 当前页
        // }
      ],
      directoryS: '',
      contentsList: [],
      rulesForm: {
        subject: [],
        directoryName: [],
        label: [],
        keyword: [],
        textOf: [],
        nandu: [],
        fangXiang: [],
        manarge: [],
        timu: [],
        qiye: [],
        fangXiang: [],
        province: []
      },
      questionId: '',
      questionsList: [],
      removeList: [],
      messageList: false,
      total: 0,
      querInfo: {
        pagesize: 5,
        pagenum: 1
      }
    }
  },
  name: '',
  props: {},
  computed: {},
  watch: {},
  components: {
    QuestionsPreview
  },
  created() {
    this.getQuestionsList()
    this.textType = questionType
    this.hard = difficulty
    this.guidance = direction
    this.getUsers()
    this.getCityData()
    document.onkeydown = function(e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.form)
      }
    }
    this.getBaseList()
  },
  mounted() {},
  methods: {
    // 获取题库的数据的
    async getQuestionsList() {
      try {
        const { data } = await subjectEz()
        this.subjectList = data
        // console.log(data)
      } catch (err) {}
    },
    // 获取标签
    async getlistTags() {},
    //  获取用户
    async getUsers() {
      try {
        const { data } = await simple()
        this.userList = data
      } catch (err) {}
    },
    // 获取省
    getCityData: function() {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function(e) {
      this.citySelect.cityDate = citys(e)
      this.form.city = this.citySelect.cityDate[0]
    },
    // 获取用户列表
    async getBaseList() {
      const { data } = await listBase({
        page: this.querInfo.pagenum,
        pagesize: this.querInfo.pagesize
        // subjectID: this.form.subjectID,
      })
      this.tableBse = data.items
      // console.log(this.tableBse)
      this.total = data.counts
    },
    async subjectChange(index) {
      this.form.label = ''
      this.form.contents = ''
      // console.log(index)
      try {
        const { data } = await directorySList({ subjectID: index })
        this.contentsList = data.items
      } catch (err) {}
      try {
        const { data } = await listTags({ subjectID: index })
        this.tagsList = data.items
      } catch (err) {}
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
      this.getBaseList()
    },
    //  获取点击预览那条数据
    async previewList(id) {
      this.$refs.preview.dialogVisible = true
      try {
        const { data } = await detail({ id: id })
        this.questionsList = data
        // console.log(this.questionsList)
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    async removeQuestions(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data } = await remove({ id: id })
      this.$message.success('删除用户成功')
      this.getBaseList()
    },
    // 每页显示信息条数
    handleSize(val) {
      this.querInfo.pagesize = val
      if (this.querInfo.pagenum === 1) {
        this.getBaseList(this.querInfo)
      }
    },
    // 进入某一页
    handleCurrent(val) {
      this.querInfo.pagenum = val
      this.getBaseList()
    },
    // 详情数据
    async getDetail() {
      const { data } = await detail()
      console.log(data)
    },
    async searchList() {
      // const { data } = await listBase
      const { data } = await listBase({
        subjectID: this.form.subject,
        page: this.querInfo.pagenum,
        pagesize: this.querInfo.pagesize,
        keyword: this.form.key
        // page: this.querInfo.pagenum,
        // pagesize: this.querInfo.pagesize,
        // subjectID:
      })
      console.log(data)
      this.tableBse = data.items
    },
    //
    async toQuestions(id) {
      try {
        const { data } = await detail({ id: id })
        this.questionsList = data
        // console.log(this.questionsList)
        // console.log(data)
      } catch (err) {
        console.log(err)
      }

      this.$router.push({
        name: 'questions-new',
        params: {
          id: this.questionsList
        }
      })
      // console.log(this.questionsList)
    },

    async addClick(id) {
      try {
        await this.$confirm('此操作将该项目加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
      } catch (err) {
        return this.$message('已取消删除')
      }

      const { data } = await choiceAdd({
        id: id,
        choiceState: 1
      })
      console.log(data)
      this.$message.success('加入精选成功')
      this.getBaseList()
    }
  }
}
</script>

<style scoped <style lang="scss">
.app-main {
  top: 20px;
  min-height: 100%;
  height: 100px;
  padding: 0 10px;
  margin: 10px 0;

  .question-container {
    .el-card__body {
      padding: 20px;
      .btn_wrapper {
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
      }
      .el-form-item__content {
        margin-left: 80px;
      }
      .alertInfo {
        margin-bottom: 15px;
      }
      .el-form-item__label {
        width: 80px;
        line-height: 32px;
      }
    }
    .filter-item {
      margin-right: 2%;
    }
    ::v-deep .el-table__body {
      width: 100%;
    }
  }
}
</style>
